<!DOCTYPE html>
<!-- 
  TabWorkspace Manager - 浏览器扩展弹出页面
  功能：提供用户界面用于管理标签页工作区
  作者：TabWorkspace Manager Team
  版本：0.1.0
-->
<html lang="zh-CN">
<head>
  <!-- 基础页面配置 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TabWorkspace Manager</title>
  <!-- 引入样式文件，使用版本号防止缓存问题 -->
  <link rel="stylesheet" href="css/popup.css?v=1.3">
</head>
<body>
  <!-- 主容器：包含整个扩展的用户界面 -->
  <div class="container">
    <!-- 页面头部：包含标题和标签页切换按钮 -->
    <header>
      <h1>TabWorkspace Manager</h1>
      <!-- 标签页切换导航 -->
      <div class="tabs">
        <button id="tab-save" class="tab-btn active">保存</button>
        <button id="tab-workspaces" class="tab-btn">工作区</button>
      </div>
    </header>

    <!-- 主要内容区域：包含保存面板和工作区列表面板 -->
    <main>
      <!-- 保存标签页面板：用户可以在此保存当前窗口的所有标签页 -->
      <section id="save-panel" class="panel active">
        <div class="save-options">
          <h2>保存当前标签页</h2>
          <!-- 显示当前标签页数量，动态更新 -->
          <p class="tab-count">当前打开 <span id="current-tabs-count">0</span> 个标签页</p>
          
          <!-- 保存模式选择：用户可以选择仅保存链接或同时缓存页面内容 -->
          <div class="save-mode">
            <h3>保存模式</h3>
            <div class="radio-group">
              <!-- 保存模式选项1：仅保存链接（默认选中） -->
              <label class="radio-option">
                <input type="radio" name="save-mode" value="links-only" checked>
                <div class="radio-content">
                  <!-- 链接图标 -->
                  <div class="radio-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                    </svg>
                  </div>
                  <div class="radio-text">
                    <h4>仅保存链接</h4>
                    <p>只保存URL和标题，占用空间小</p>
                  </div>
                </div>
              </label>
              
              <!-- 保存模式选项2：保存链接并缓存页面内容 -->
              <label class="radio-option">
                <input type="radio" name="save-mode" value="cache">
                <div class="radio-content">
                  <!-- 缓存图标 -->
                  <div class="radio-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                      <line x1="8" y1="21" x2="16" y2="21"></line>
                      <line x1="12" y1="17" x2="12" y2="21"></line>
                    </svg>
                  </div>
                  <div class="radio-text">
                    <h4>保存链接并缓存</h4>
                    <p>同时缓存页面内容，支持离线访问</p>
                  </div>
                </div>
              </label>
            </div>
          </div>
          
          <!-- 工作区名称输入区域 -->
          <div class="workspace-name">
            <h3>工作区名称</h3>
            <!-- 工作区名称输入框，支持实时验证 -->
            <input type="text" id="workspace-name" placeholder="请输入工作区名称" required>
          </div>
          
          <!-- 保存工作区按钮 -->
          <button id="save-workspace" class="btn primary">保存工作区</button>
          <!-- 状态消息显示区域：显示保存进度、成功或错误信息 -->
          <div id="save-status" class="status-message"></div>
        </div>
      </section>

      <!-- 工作区列表面板：显示已保存的工作区列表 -->
      <section id="workspaces-panel" class="panel">
        <div class="workspaces-list">
          <h2>我的工作区</h2>
          <!-- 搜索栏：支持按工作区名称、标签页标题或URL搜索 -->
          <div class="search-bar">
            <input type="text" id="search-workspace" placeholder="搜索工作区...">
            <!-- 搜索按钮（装饰性，实际搜索通过输入框实时触发） -->
            <button id="search-btn">
              <!-- 搜索图标 -->
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </button>
          </div>
          
          <!-- 工作区列表容器：动态显示工作区卡片或空状态 -->
          <div id="workspaces-container">
            <!-- 工作区列表将通过JavaScript动态生成 -->
            <!-- 空状态：当没有工作区时显示 -->
            <div class="empty-state">
              <!-- 空状态图标 -->
              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                <line x1="8" y1="21" x2="16" y2="21"></line>
                <line x1="12" y1="17" x2="12" y2="21"></line>
              </svg>
              <p>暂无保存的工作区</p>
              <p class="empty-state-sub">点击"保存"标签创建您的第一个工作区</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页面底部：显示版本信息 -->
    <footer>
      <p>TabWorkspace Manager v0.1.0</p>
    </footer>
  </div>

  <!-- 模态框区域：包含工作区详情、编辑和删除确认模态框 -->
  
  <!-- 工作区详情模态框：显示工作区的详细信息和操作按钮 -->
  <div id="workspace-detail-modal" class="modal">
    <div class="modal-content">
      <!-- 模态框头部：显示工作区名称和关闭按钮 -->
      <div class="modal-header">
        <h2 id="detail-workspace-name">工作区名称</h2>
        <button class="close-modal">&times;</button>
      </div>
      <!-- 模态框主体内容 -->
      <div class="modal-body">
        <!-- 工作区基本信息和操作按钮 -->
        <div class="workspace-info">
          <p>创建时间: <span id="detail-created-time">2023-01-01</span></p>
          <p>标签页数量: <span id="detail-tabs-count">0</span></p>
          <!-- 恢复工作区按钮组 -->
          <button id="restore-current-window" class="btn secondary">在当前窗口恢复</button>
          <button id="restore-new-window" class="btn secondary">在新窗口恢复</button>
          <!-- 编辑工作区按钮 -->
          <button id="edit-workspace" class="btn outline">编辑工作区</button>
        </div>
        
        <!-- 标签页列表区域 -->
        <div class="tabs-list">
          <h3>标签页列表</h3>
          <!-- 标签页容器：动态显示工作区中的所有标签页 -->
          <div id="detail-tabs-container">
            <!-- 标签页列表将通过JavaScript动态生成 -->
          </div>
        </div>
        
        <!-- 危险操作按钮区域 -->
        <div class="action-buttons">
          <button id="delete-workspace" class="btn danger">删除工作区</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑工作区模态框：允许用户修改工作区名称和管理标签页 -->
  <div id="edit-workspace-modal" class="modal">
    <div class="modal-content">
      <!-- 编辑模态框头部 -->
      <div class="modal-header">
        <h2>编辑工作区</h2>
        <button class="close-modal">&times;</button>
      </div>
      <!-- 编辑模态框主体内容 -->
      <div class="modal-body">
        <!-- 工作区名称编辑区域 -->
        <div class="edit-workspace-name">
          <label for="edit-name-input">工作区名称</label>
          <input type="text" id="edit-name-input" placeholder="工作区名称">
        </div>
        
        <!-- 可编辑的标签页列表区域 -->
        <div class="edit-tabs-list">
          <h3>标签页列表</h3>
          <!-- 可编辑标签页容器：显示可删除的标签页列表 -->
          <div id="edit-tabs-container">
            <!-- 可编辑的标签页列表将通过JavaScript动态生成 -->
          </div>
          
          <!-- 添加新标签页区域 -->
          <div class="add-tab">
            <h3>添加新标签页</h3>
            <!-- 添加标签页表单 -->
            <div class="add-tab-form">
              <input type="text" id="add-tab-url" placeholder="https://example.com">
              <input type="text" id="add-tab-title" placeholder="标签页标题">
              <button id="add-tab-btn" class="btn secondary">添加</button>
            </div>
          </div>
        </div>
        
        <!-- 编辑操作按钮区域 -->
        <div class="action-buttons">
          <button id="save-edit" class="btn primary">保存更改</button>
          <button id="cancel-edit" class="btn outline">取消</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 确认删除模态框：防止用户误删工作区 -->
  <div id="confirm-delete-modal" class="modal">
    <div class="modal-content">
      <!-- 删除确认模态框头部 -->
      <div class="modal-header">
        <h2>确认删除</h2>
        <button class="close-modal">&times;</button>
      </div>
      <!-- 删除确认模态框主体内容 -->
      <div class="modal-body">
        <!-- 删除确认信息 -->
        <p>您确定要删除工作区 "<span id="delete-workspace-name"></span>" 吗？</p>
        <p class="warning">此操作无法撤销。</p>
        
        <!-- 删除确认操作按钮 -->
        <div class="action-buttons">
          <button id="confirm-delete" class="btn danger">确认删除</button>
          <button id="cancel-delete" class="btn outline">取消</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入主要的JavaScript逻辑文件 -->
  <script src="js/popup.js"></script>
</body>
</html>